<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            vue中的事件处理
            1. 如何绑定事件：                      通过指令：v-on:事件名="事件函数"  
            2. 事件处理函数定义在哪里？            config.methods 配置项中定义===>vm身上也来一份===>在模板中直接可以使用
            3. 事件处理函数中的this指向哪里
                在vue中，一般99%的情况，vue管理的方法，一定要定义成普通方法，定义成普通方法，vue保你this指向当前组件实例

            4. 事件处理函数中的事件对象怎么获取
            5. 事件处理函数怎么传递参数
         -->
        <div id="demo">
            <p><button v-on:click="say">say 函数名</button></p>
            <p><button v-on:click="say()">say 函数调用</button></p>
            <p><button v-on:click="run">箭头函数, this 指向window </button></p>
            <h3>简写</h3>
            <p>事件对象获取：（1）实参$event指定位置传递 （2）不传直接从window.event获取</p>
            <p><button @click="hello(1,2,3)">传递参数</button></p>
            <p><button @click="hello(1,$event,3)">传参，还要传事件对象 实参 $event</button></p>
        </div>
        <script>
            const vm = new Vue({
                el:'#demo',
                data:{
                    username:'尚硅谷'
                },
                // 事件处理函数定义在methods配置项中
                methods: {
                    // 普通函数 this指向当前实例vm
                    say(e){
                        console.log('say this: ', this, e)
                    },
                    hello:function(a,b,c){
                        console.log('hello this: ', this, a, b, c)
                        console.log('window.event: ', event)
                    },
                    // 箭头函数
                    run:()=>{
                        console.log('arrow run this: ', this)
                    }
                }
            })
            console.log('vm: ', vm)
        </script>
    </body>
</html>